<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="page_top">
      <div class="left_btn" @click="back">
        <img src="../../assets/image/back.png" alt="" />
      </div>
      <crumbs basetitle="客户" title="充值/续费管理"></crumbs>
    </div>
    <div class="content">
      <el-card>
        <div class="screen">
          <span class="bord">筛选</span>
          <div class="deleate" @click="clear">
            <img
              style="margin-top: -1px"
              src="../../assets/image/容器.png"
              alt=""
            />
            <span class="clear">清除</span>
          </div>
        </div>
        <div class="screen_condition">
          <div class="select_item">
            <div style="display: flex; align-items: center">
              <span style="flex-shrink: 0">公司名称：</span>
              <el-input
                size="large"
                placeholder="请输入公司名称"
                v-model="companyName"
                @input="changecompanyName"
              ></el-input>
            </div>
            <div>
              <span>产品筛选：</span>
              <el-select
                v-model="productcode"
                class="m-2"
                placeholder="全部"
                size="large"
                @change="changeproducttype"
              >
                <el-option
                  v-for="item in products"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div>
              <span>充值方式：</span>
              <el-select
                v-model="paytypecode"
                class="m-2"
                placeholder="全部"
                size="large"
                @change="changepaytype"
              >
                <el-option
                  v-for="item in paytypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="dc_btn my_btn" @click="upfile">
            <img src="../../assets/image/导出@2x.png" alt="" />
            <span>导出</span>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 16px">
        <div class="table-list">
          <el-table :data="tableData" style="width: 100%; height: 520px" :header-cell-style="{
              background: '#FAFAFC',
              color: '#202536',
            }">
            <el-table-column
              prop="companyName"
              label="客户名"
              width="300"
              align="center"
              fixed
            />
            <el-table-column
              prop="productType"
              label="产品"
              width="150"
              align="center"
            >
              <template #default="scope">
                <span v-if="scope.row.productType === 0">子弹发薪</span>
                <span v-else-if="scope.row.productType === 1">电子签</span>
                <span v-else-if="scope.row.productType === 2">日日保</span>
                <span v-else-if="scope.row.productType === 3">长期保</span>
                <span v-else-if="scope.row.productType === 4">群发消息</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              width="150"
              align="center"
            >
              <template #default="scope">
                <span
                  style="color: #9497b1; font-weight: 500"
                  v-if="scope.row.status === 0"
                  >未审核</span
                >
                <span
                  style="color: #202536; font-weight: 500"
                  v-else-if="scope.row.status === 1"
                  >已审核</span
                >
                <span
                  style="color: #e05f42; font-weight: 500"
                  v-else-if="scope.row.status === 2"
                  >已驳回</span
                >
                <span
                  style="color: #3e5ff5; font-weight: 500"
                  v-else-if="scope.row.status === 3"
                  >已提现</span
                >
                <span
                  style="color: #3db86d; font-weight: 500"
                  v-else-if="scope.row.status === 4"
                  >已转出</span
                >
                <span style="color: #ffa814; font-weight: 500" v-else
                  >已转入</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="payMoney"
              label="充值金额"
              width="200"
              align="center"
            />
            <el-table-column
              prop="createTime"
              label="充值时间"
              width="300"
              align="center"
            />
            <el-table-column
              prop="payMode"
              label="充值方式"
              width="150"
              align="center"
            >
              <template #default="scope">
                <span v-if="scope.row.payMode === 1">公对公充值</span>
                <span v-else-if="scope.row.payMode === 2">客户微信充值</span>
                <span v-else-if="scope.row.payMode === 3">私对公充值</span>
                <span v-else-if="scope.row.payMode === 4">赠送</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              width="200"
              align="center"
            >
              <template #default="scope">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="scope.row.remark"
                    placement="bottom"
                  >
                    <div
                      style="
                        margin-right: 5px;
                        width: 100px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                    >
                      {{ scope.row.remark }}
                    </div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="salesScenario"
              label="类型"
              width="100"
              align="center"
            >
              <template #default="scope">
                <span v-if="scope.row.salesScenario === 0">首签</span>
                <span v-else>续费</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="voucherUrl"
              label="充值凭证"
              width="150"
              align="center"
            >
              <template #default="scope">
                <span
                  v-if="scope.row.voucherUrl != ''"
                  style="color: #3e5ff5; cursor: pointer"
                  @click="checkvoucher(scope.row.voucherUrl)"
                  >查看凭证</span
                >
                <span v-else>查看凭证</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="bankName"
              label="收款账户"
              width="300"
              align="center"
            />
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="200"
            >
              <template #default="scope">
                <!-- <el-button
                  v-show="scope.row.status === 0 && scope.row.payMode !== 1"
                  link
                  style="color: #3db86d"
                  type="success"
                  @click="passClick(scope.row)"
                  >通过</el-button
                >
                <el-button
                  v-show="scope.row.status === 0 && scope.row.payMode !== 1"
                  link
                  style="color: #ea0000"
                  type="danger"
                  @click="rejectClick(scope.row)"
                  >驳回</el-button
                > -->
                <el-button
                  link
                  style="color: #0256ff"
                  type="danger"
                  v-show="scope.row.status === 0"
                  @click="auditbtn(scope.row)"
                  >付款审核</el-button
                >
                <el-button
                  link
                  type="primary"
                  style="color: #0256ff"
                  @click="handleClick(scope.row)"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <!-- <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 30, 50]"
              layout="total, sizes, prev, pager, next"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div> -->
          <pagination
            :total="total"
            :currentPage="currentPage"
            :pageSize="pageSize"
            @SizeChange="handleSizeChange"
            @CurrentChange="handleCurrentChange"
          ></pagination>
        </div>
      </el-card>
    </div>
    <!-- 产看凭证弹出框 -->
    <el-dialog v-model="dialogvoucherVisible" title="充值凭证查看" :width="isMobile ? '580' : '30%'">
      <div style="text-align: center">
        <img style="width: 100%" crossorigin="anonymous" :src="voucherimg" alt="" />
      </div>
    </el-dialog>
    <!-- 原审核对话框 -->
    <el-dialog v-model="dialogFormVisible" title="审核" :width="isMobile ? '580' : '30%'">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="showorhideflag ? rulesok : rulesno"
        label-width="100px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="付款方式" prop="payMode" v-show="showorhideflag">
          <el-select v-model="ruleForm.payMode" placeholder="付款方式">
            <el-option
              v-for="item in paytypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="收款账户" prop="receiptId" v-show="showorhideflag">
          <el-select v-model="ruleForm.receiptId" placeholder="收款账户">
            <el-option
              v-for="item in adminrechargetype"
              :key="item.receiptId"
              :label="item.bankName"
              :value="item.receiptId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" placeholder="请输入备注" />
        </el-form-item>
        <div style="display: flex; justify-content: end">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确定
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 新审核对话框 -->
    <!-- 子弹发薪 -->
    <el-drawer
      v-model="bullaudit"
      class="drawer"
      :title="audittitle + '充值付费审核'"
      direction="rtl"
      :size="isMobile ? '100%' : '30%'"
    >
      <div class="closedrawer" @click="bullhideout">
        <span>收</span><span>起</span
        ><img src="../../assets/image/组355.png" alt="" />
      </div>
      <el-form
        ref="bullruleFormRef"
        :model="bullruleForm"
        :rules="bullrules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
        label-position="top"
      >
        <el-form-item label="套餐名称" prop="package">
          <el-input v-model="bullruleForm.package" />
        </el-form-item>
        <el-form-item label="服务金额" prop="price">
          <el-input v-model="bullruleForm.price" />
        </el-form-item>
        <el-form-item label="购买月份" prop="paym">
          <el-input v-model="bullruleForm.paym" />
        </el-form-item>
        <el-form-item label="过期时间" prop="overtime">
          <el-input v-model="bullruleForm.overtime" />
        </el-form-item>
        <el-form-item label="付款方式" prop="paymode">
          <el-select
            v-model="bullruleForm.paymode"
            placeholder="请选择付款方式"
          >
            <el-option
              v-for="item in paytypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="收款账户" prop="receptid">
          <el-select
            v-model="bullruleForm.receptid"
            placeholder="请选择收款账户"
          >
            <el-option
              v-for="item in adminrechargetype"
              :key="item.receiptId"
              :label="item.bankName"
              :value="item.receiptId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传凭证">
          <img
            style="width: 100px; height: 100px"
            crossorigin="anonymous" :src="bullruleForm.img"
            alt=""
          />
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input
            v-model="bullruleForm.remak"
            maxlength="50"
            show-word-limit
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-button style="color: #eb3435" @click="bullreject('bull')"
            >驳回</el-button
          >
          <el-button
            type="primary"
            style="background-color: #0256ff"
            @click="bullsubmitForm(bullruleFormRef)"
            >通过</el-button
          >
        </div>
      </template>
    </el-drawer>
    <!-- 电子签 -->
    <el-drawer
      v-model="eleaudit"
      class="drawer"
      :title="audittitle + '充值付费审核'"
      direction="rtl"
      :size="isMobile ? '100%' : '30%'"
    >
      <div class="closedrawer" @click="elehideout">
        <span>收</span><span>起</span
        ><img src="../../assets/image/组355.png" alt="" />
      </div>
      <el-form
        ref="eleruleFormRef"
        :model="eleruleForm"
        :rules="elerules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
        label-position="top"
      >
        <el-form-item label="服务金额" prop="price">
          <el-input v-model="eleruleForm.price" />
        </el-form-item>
        <el-form-item label="份数" prop="num">
          <el-input v-model="eleruleForm.num" />
        </el-form-item>
        <el-form-item label="付款方式" prop="paymode">
          <el-select v-model="eleruleForm.paymode" placeholder="请选择付款方式">
            <el-option
              v-for="item in paytypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="收款账户" prop="receptid">
          <el-select
            v-model="eleruleForm.receptid"
            placeholder="请选择收款账户"
          >
            <el-option
              v-for="item in adminrechargetype"
              :key="item.receiptId"
              :label="item.bankName"
              :value="item.receiptId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传凭证">
          <img
            style="width: 100px; height: 100px"
            crossorigin="anonymous" :src="eleruleForm.img"
            alt=""
          />
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input
            v-model="eleruleForm.remak"
            maxlength="50"
            show-word-limit
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="flex: auto">
          <el-button style="color: #eb3435" @click="elereject('ele')"
            >驳回</el-button
          >
          <el-button
            type="primary"
            style="background-color: #0256ff"
            @click="elesubmitForm(eleruleFormRef)"
            >通过</el-button
          >
        </div>
      </template>
    </el-drawer>
    <!-- 日日保 -->
    <el-drawer
      v-model="everyaudit"
      class="drawer"
      :title="audittitle + '充值付费审核'"
      direction="rtl"
      :size="isMobile ? '100%' : '30%'"
    >
      <div class="closedrawer" @click="everyhideout">
        <span>收</span><span>起</span
        ><img src="../../assets/image/组355.png" alt="" />
      </div>
      <el-form
        ref="everyruleFormRef"
        :model="everyruleForm"
        :rules="everyrules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
        label-position="top"
      >
        <el-form-item label="服务金额" prop="price">
          <el-input v-model="everyruleForm.price" />
        </el-form-item>
        <el-form-item label="付款方式" prop="paymode">
          <el-select
            v-model="everyruleForm.paymode"
            placeholder="请选择付款方式"
          >
            <el-option
              v-for="item in paytypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="收款账户" prop="receptid">
          <el-select
            v-model="everyruleForm.receptid"
            placeholder="请选择收款账户"
          >
            <el-option
              v-for="item in adminrechargetype"
              :key="item.receiptId"
              :label="item.bankName"
              :value="item.receiptId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传凭证">
          <img
            style="width: 100px; height: 100px"
            crossorigin="anonymous" :src="everyruleForm.img"
            alt=""
          />
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input
            v-model="everyruleForm.remak"
            maxlength="50"
            show-word-limit
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="flex: auto">
          <el-button style="color: #eb3435" @click="everyreject('every')"
            >驳回</el-button
          >
          <el-button
            type="primary"
            style="background-color: #0256ff"
            @click="everysubmitForm(everyruleFormRef)"
            >通过</el-button
          >
        </div>
      </template>
    </el-drawer>
    <!-- 长期保 -->
    <el-drawer
      v-model="longaudit"
      class="drawer"
      :title="audittitle + '充值付费审核'"
      direction="rtl"
      :size="isMobile ? '100%' : '30%'"
    >
      <div class="closedrawer" @click="longhideout">
        <span>收</span><span>起</span
        ><img src="../../assets/image/组355.png" alt="" />
      </div>
      <el-form
        ref="longruleFormRef"
        :model="longruleForm"
        :rules="longrules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
        label-position="top"
      >
        <el-form-item label="服务金额" prop="price">
          <el-input v-model="longruleForm.price" />
        </el-form-item>
        <el-form-item label="付款方式" prop="paymode">
          <el-select
            v-model="longruleForm.paymode"
            placeholder="请选择付款方式"
          >
            <el-option
              v-for="item in paytypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="收款账户" prop="receptid">
          <el-select
            v-model="longruleForm.receptid"
            placeholder="请选择收款账户"
          >
            <el-option
              v-for="item in adminrechargetype"
              :key="item.receiptId"
              :label="item.bankName"
              :value="item.receiptId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传凭证">
          <img
            style="width: 100px; height: 100px"
            crossorigin="anonymous" :src="longruleForm.img"
            alt=""
          />
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input
            v-model="longruleForm.remak"
            maxlength="50"
            show-word-limit
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="flex: auto">
          <el-button style="color: #eb3435" @click="longreject('long')"
            >驳回</el-button
          >
          <el-button
            type="primary"
            style="background-color: #0256ff"
            @click="longsubmitForm(longruleFormRef)"
            >通过</el-button
          >
        </div>
      </template>
    </el-drawer>
    <!-- 群发消息 -->
    <el-drawer
      v-model="messageaudit"
      class="drawer"
      :title="audittitle + '充值付费审核'"
      direction="rtl"
      :size="isMobile ? '100%' : '30%'"
    >
      <div class="closedrawer" @click="messagehideout">
        <span>收</span><span>起</span
        ><img src="../../assets/image/组355.png" alt="" />
      </div>
      <el-form
        ref="messageruleFormRef"
        :model="messageruleForm"
        :rules="messagerules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
        label-position="top"
      >
        <el-form-item label="服务金额" prop="price">
          <el-input v-model="messageruleForm.price" />
        </el-form-item>
        <el-form-item label="付款方式" prop="paymode">
          <el-select
            v-model="messageruleForm.paymode"
            placeholder="请选择付款方式"
          >
            <el-option
              v-for="item in paytypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="收款账户" prop="receptid">
          <el-select
            v-model="messageruleForm.receptid"
            placeholder="请选择收款账户"
          >
            <el-option
              v-for="item in adminrechargetype"
              :key="item.receiptId"
              :label="item.bankName"
              :value="item.receiptId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传凭证">
          <img
            style="width: 100px; height: 100px"
            crossorigin="anonymous" :src="messageruleForm.img"
            alt=""
          />
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input
            v-model="messageruleForm.remak"
            maxlength="50"
            show-word-limit
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="flex: auto">
          <el-button style="color: #eb3435" @click="messagereject('message')"
            >驳回</el-button
          >
          <el-button
            type="primary"
            style="background-color: #0256ff"
            @click="messagesubmitForm(messageruleFormRef)"
            >通过</el-button
          >
        </div>
      </template>
    </el-drawer>
    <!-- 驳回 -->
    <el-dialog v-model="reject" title="驳回原因" :width="isMobile ? '580' : '30%'">
      <el-input
        v-model="Causeofrejection"
        maxlength="50"
        show-word-limit
        type="textarea"
        placeholder="请输入备注"
      />
      <template #footer>
        <span
          class="dialog-footer"
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-button @click="bhcancel">取消</el-button>
          <el-button
            type="primary"
            style="background-color: #0256ff"
            @click="bhok"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import pagination from '../../components/pagination.vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import baseurl from '../../api/env'
import { shake, confirm } from '../../utils/utils'
import { ref, reactive, computed, watch, onMounted,onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  getclientrechargeapi,
  getclientpayexcelapi,
  getbulletpayrollapi, //子弹发薪
  getelectronicvisaauditapi, //电子签
  geteverydayinsuranceauditapi, //日日保
  getlongtimeinsuranceauditapi, //长期保
  getmessageauditapi,
  getadminrechargeapi,
} from '../../api/api'
import type { clientrechargetype } from '../../typescript/interface'
const isMobile = ref((window as any).isMobile)
const router = useRouter()
const route = useRoute()
const reject = ref(false)
const bullruleFormRef = ref<FormInstance>()
const eleruleFormRef = ref<FormInstance>()
const everyruleFormRef = ref<FormInstance>()
const longruleFormRef = ref<FormInstance>()
const messageruleFormRef = ref<FormInstance>()
const bullruleForm = reactive({
  id: 0,
  companyId: 0,
  remak: '',
  receptid: '',
  paymode: '',
  overtime: '',
  paym: '',
  price: '',
  package: '暂无套餐',
  img: '',
})

const bullrules = reactive<FormRules>({
  paymode: [
    {
      required: true,
      message: '请选择付款方式',
      trigger: 'change',
    },
  ],
  receptid: [
    {
      required: true,
      message: '请选择收款账户',
      trigger: 'change',
    },
  ],
})
const eleruleForm = reactive({
  id: 0,
  companyId: 0,
  remak: '',
  receptid: '',
  paymode: '',
  price: '',
  img: '',
  num: '0',
})

const elerules = reactive<FormRules>({
  paymode: [
    {
      required: true,
      message: '请选择付款方式',
      trigger: 'change',
    },
  ],
  receptid: [
    {
      required: true,
      message: '请选择收款账户',
      trigger: 'change',
    },
  ],
})

const everyruleForm = reactive({
  id: 0,
  companyId: 0,
  remak: '',
  receptid: '',
  paymode: '',
  price: '',
  img: '',
})

const everyrules = reactive<FormRules>({
  paymode: [
    {
      required: true,
      message: '请选择付款方式',
      trigger: 'change',
    },
  ],
  receptid: [
    {
      required: true,
      message: '请选择收款账户',
      trigger: 'change',
    },
  ],
})

const longruleForm = reactive({
  id: 0,
  companyId: 0,
  remak: '',
  receptid: '',
  paymode: '',
  price: '',
  img: '',
})
const messageruleForm = reactive({
  id: 0,
  companyId: 0,
  remak: '',
  receptid: '',
  paymode: '',
  price: '',
  img: '',
})

const longrules = reactive<FormRules>({
  paymode: [
    {
      required: true,
      message: '请选择付款方式',
      trigger: 'change',
    },
  ],
  receptid: [
    {
      required: true,
      message: '请选择收款账户',
      trigger: 'change',
    },
  ],
})
const messagerules = reactive<FormRules>({
  paymode: [
    {
      required: true,
      message: '请选择付款方式',
      trigger: 'change',
    },
  ],
  receptid: [
    {
      required: true,
      message: '请选择收款账户',
      trigger: 'change',
    },
  ],
})
const bullsubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log("submit!");
      getbulletpayrollapi({
        id: bullruleForm.id,
        companyId: bullruleForm.companyId,
        status: 1,
        payMode: bullruleForm.paymode,
        remark: bullruleForm.remak,
        receiptId: bullruleForm.receptid,
      }).then((res) => {
        // console.log(res);
        bullaudit.value = false
        bullresetForm(bullruleFormRef.value)
        getclientrecharge()
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const bullresetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const elesubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log("submit!");
      getelectronicvisaauditapi({
        id: eleruleForm.id,
        companyId: eleruleForm.companyId,
        status: 1,
        payMode: eleruleForm.paymode,
        remark: eleruleForm.remak,
        receiptId: eleruleForm.receptid,
      }).then((res) => {
        // console.log(res);
        eleaudit.value = false
        eleresetForm(eleruleFormRef.value)
        getclientrecharge()
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const eleresetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const everysubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log("submit!");
      geteverydayinsuranceauditapi({
        operateFlag: 1,
        receiptId: everyruleForm.receptid,
        payMode: everyruleForm.paymode,
        remark: everyruleForm.remak,
        companyId: everyruleForm.companyId,
        id: everyruleForm.id,
      }).then((res) => {
        console.log(res)
        everyaudit.value = false
        everyresetForm(bullruleFormRef.value)
        getclientrecharge()
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const everyresetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const longsubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log("submit!");
      getlongtimeinsuranceauditapi({
        operateFlag: 1,
        receiptId: longruleForm.receptid,
        payMode: longruleForm.paymode,
        remark: longruleForm.remak,
        companyId: longruleForm.companyId,
        id: longruleForm.id,
      }).then((res) => {
        console.log(res)
        longaudit.value = false
        longresetForm(longruleFormRef.value)
        getclientrecharge()
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const messagesubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log("submit!");
      getmessageauditapi({
        operateFlag: 1,
        receiptId: messageruleForm.receptid,
        payMode: messageruleForm.paymode,
        remark: messageruleForm.remak,
        companyId: messageruleForm.companyId,
        id: messageruleForm.id,
      }).then((res) => {
        console.log(res)
        messageaudit.value = false
        messageresetForm(messageruleFormRef.value)
        getclientrecharge()
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const longresetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const messageresetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const everyreject = (val: string) => {
  reject.value = true
  butype.value = val
}
const longreject = (val: string) => {
  reject.value = true
  butype.value = val
}
const messagereject = (val: string) => {
  reject.value = true
  butype.value = val
}
const bullreject = (val: string) => {
  reject.value = true
  butype.value = val
}
const elereject = (val: string) => {
  reject.value = true
  butype.value = val
}
const Causeofrejection = ref('')
const butype = ref('')
const bhok = () => {
  if (Causeofrejection.value === '') {
    ElMessage.error('请输入驳回原因')
  } else {
    if (butype.value === 'bull') {
      getbulletpayrollapi({
        id: bullruleForm.id,
        companyId: bullruleForm.companyId,
        status: 2,
        payMode: bullruleForm.paymode,
        remark: Causeofrejection.value,
        receiptId: bullruleForm.receptid,
      }).then((res) => {
        console.log(res)
        bullaudit.value = false
        reject.value = false
        bullresetForm(bullruleFormRef.value)
        getclientrecharge()
      })
    } else if (butype.value === 'ele') {
      getelectronicvisaauditapi({
        id: eleruleForm.id,
        companyId: eleruleForm.companyId,
        status: 2,
        payMode: eleruleForm.paymode,
        remark: Causeofrejection.value,
        receiptId: eleruleForm.receptid,
      }).then((res) => {
        console.log(res)
        eleaudit.value = false
        reject.value = false
        eleresetForm(eleruleFormRef.value)
        getclientrecharge()
      })
    } else if (butype.value === 'long') {
      getlongtimeinsuranceauditapi({
        operateFlag: 2,
        receiptId: longruleForm.receptid,
        payMode: longruleForm.paymode,
        remark: Causeofrejection.value,
        companyId: longruleForm.companyId,
        id: longruleForm.id,
      }).then((res) => {
        console.log(res)
        reject.value = false
        longaudit.value = false
        longresetForm(longruleFormRef.value)
        getclientrecharge()
      })
    } else if (butype.value === 'every') {
      geteverydayinsuranceauditapi({
        operateFlag: 2,
        receiptId: everyruleForm.receptid,
        payMode: everyruleForm.paymode,
        remark: Causeofrejection.value,
        companyId: everyruleForm.companyId,
        id: everyruleForm.id,
      }).then((res) => {
        console.log(res)
        reject.value = false
        everyaudit.value = false
        everyresetForm(everyruleFormRef.value)
        getclientrecharge()
      })
    } else if (butype.value === 'message') {
      getmessageauditapi({
        operateFlag: 2,
        receiptId: messageruleForm.receptid,
        payMode: messageruleForm.paymode,
        remark: Causeofrejection.value,
        companyId: messageruleForm.companyId,
        id: messageruleForm.id,
      }).then((res) => {
        console.log(res)
        reject.value = false
        messageaudit.value = false
        messageresetForm(messageruleFormRef.value)
        getclientrecharge()
      })
    }
  }
}
const bhcancel = () => {
  Causeofrejection.value = ''
  reject.value = false
}
const audittitle = ref('')
const bullaudit = ref(false)
const eleaudit = ref(false)
const longaudit = ref(false)
const everyaudit = ref(false)
const messageaudit = ref(false)
const auditbtn = (val: any) => {
  console.log(val)
  getadminrecharge(val.companyId)
  audittitle.value = val.companyName
  if (val.productType == 0) {
    bullresetForm(bullruleFormRef.value)
    bullruleForm.remak = ''
    bullaudit.value = true
    bullruleForm.img = val.voucherUrl
    bullruleForm.price = val.payMoney
    bullruleForm.paym = val.rechargeAmount
    bullruleForm.id = val.id
    bullruleForm.companyId = val.companyId
    var currentExpireTime = new Date(val.accountExpireTime).getTime()
    bullruleForm.overtime = new Date(
      currentExpireTime + val.rechargeAmount * 31 * 24 * 60 * 60 * 1000
    ).toLocaleString()
  } else if (val.productType == 1) {
    eleaudit.value = true
    eleresetForm(eleruleFormRef.value)
    eleruleForm.remak = ''
    eleruleForm.img = val.voucherUrl
    eleruleForm.price = val.payMoney
    eleruleForm.id = val.id
    eleruleForm.companyId = val.companyId
    eleruleForm.num = val.companyId
  } else if (val.productType == 2) {
    everyresetForm(everyruleFormRef.value)
    everyruleForm.remak = ''
    everyaudit.value = true
    everyruleForm.img = val.voucherUrl
    everyruleForm.price = val.payMoney
    everyruleForm.id = val.id
    everyruleForm.companyId = val.companyId
  } else if (val.productType == 3) {
    longaudit.value = true
    longresetForm(longruleFormRef.value)
    longruleForm.remak = ''
    longruleForm.img = val.voucherUrl
    longruleForm.price = val.payMoney
    longruleForm.id = val.id
    longruleForm.companyId = val.companyId
  } else {
    messageaudit.value = true
    messageresetForm(messageruleFormRef.value)
    messageruleForm.remak = ''
    messageruleForm.img = val.voucherUrl
    messageruleForm.price = val.payMoney
    messageruleForm.id = val.id
    messageruleForm.companyId = val.companyId
  }
}
const bullhideout = () => {
  bullaudit.value = false
}
const elehideout = () => {
  eleaudit.value = false
}

const longhideout = () => {
  longaudit.value = false
}
const messagehideout = () => {
  messageaudit.value = false
}

const everyhideout = () => {
  everyaudit.value = false
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  remark: '',
  payMode: '',
  receiptId: '',
})

const rulesok = reactive<FormRules>({
  remark: [{ required: true, message: '请填写备注', trigger: 'blur' }],
  payMode: [
    {
      required: true,
      message: '请选择付款方式',
      trigger: 'change',
    },
  ],
  receiptId: [
    {
      required: true,
      message: '请选择收款账户',
      trigger: 'change',
    },
  ],
})
const rulesno = reactive<FormRules>({
  remark: [{ required: true, message: '请填写备注', trigger: 'blur' }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      if (productflag.value === 0) {
        getbulletpayroll()
      } else if (productflag.value === 1) {
        getelectronicvisaaudit()
      } else if (productflag.value === 2) {
        geteverydayinsuranceaudit()
      } else {
        getlongtimeinsuranceaudit()
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dialogFormVisible.value = false
}

const dialogFormVisible = ref(false)

// 获取充值账户
const getadminrecharge = (companyId: string) => {
  getadminrechargeapi(companyId).then((res: any) => {
    console.log(res, '111111111111111111111111111111111')
    adminrechargetype.value = res
    let id = ''
    res.forEach((ele: any, index: any) => {
      if (ele.isDistribution === 1) {
        id = ele.receiptId
      }
    })
    messageruleForm.receptid = id
    longruleForm.receptid = id
    everyruleForm.receptid = id
    eleruleForm.receptid = id
    bullruleForm.receptid = id
  })
}
const adminrechargetype = ref<any>([])
// 表单数据
// 公司名称
const companyName = ref('')
// 产品筛选
const productcode = ref('')
// 充值方式
const paytypecode = ref('')
const products = ref([
  {
    value: '0',
    label: '子弹发薪',
  },
  {
    value: '1',
    label: '电子签',
  },
  {
    value: '2',
    label: '日日保',
  },
  {
    value: '3',
    label: '长期保',
  },
  {
    value: '4',
    label: '群发消息',
  },
])
const paytypes = ref([
  {
    value: '1',
    label: '公对公',
  },
  {
    value: '2',
    label: '微信',
  },
  {
    value: '3',
    label: '私对公',
  },
  {
    value: '4',
    label: '赠送',
  },
])
const changepaytype = (val: string) => {
  paytypecode.value = val
  getclientrecharge()
}
const changeproducttype = (val: string) => {
  productcode.value = val
  getclientrecharge()
}
const changecompanyName = () => {
  shake(getclientrecharge, 1000)
}
// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
// 切换每页几条
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getclientrecharge()
}
// 切换页数
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getclientrecharge()
}
// 查看凭证弹出框
const dialogvoucherVisible = ref(false)
const voucherimg = ref('')
const checkvoucher = (src: string) => {
  voucherimg.value = src
  dialogvoucherVisible.value = true
}
onMounted(() => {
  getclientrecharge()
})
onActivated(() => {
  getclientrecharge()
})
const getclientrecharge = () => {
  getclientrechargeapi({
    productType: productcode.value,
    companyName: companyName.value,
    pageSize: pageSize.value,
    pageNum: currentPage.value,
  }).then((res: any) => {
    // console.log(res);
    tableData.value = res.list
    total.value = res.totalCount
  })
}
// 表格数据
const tableData = ref([] as clientrechargetype[])
const showorhideflag = ref(true)
const productflag = ref(-1)
// 通过
const passClick = (ele: any) => {
  // console.log(ele);
  resetForm(ruleFormRef.value)
  getadminrecharge(ele.companyId)
  dialogFormVisible.value = true
  showorhideflag.value = true
  checkmsg.operateFlag = '1'
  if (ele.productType === 0) {
    console.log('子弹发薪')
    productflag.value = ele.productType
    bulletpayrollmsg.id = ele.id
    bulletpayrollmsg.companyId = ele.companyId
    bulletpayrollmsg.status = 1
  } else if (ele.productType === 1) {
    console.log('电子签充值审核')
    electronicvisaauditmsg.id = ele.id
    electronicvisaauditmsg.companyId = ele.companyId
    electronicvisaauditmsg.status = 1
    productflag.value = ele.productType
  } else if (ele.productType === 2) {
    console.log('日日保充值审核')
    checkmsg.id = ele.id
    checkmsg.companyId = ele.companyId
    productflag.value = ele.productType
  } else {
    console.log('长期保充值审核')
    checkmsg.id = ele.id
    checkmsg.companyId = ele.companyId
    productflag.value = ele.productType
  }
}
// 驳回
const rejectClick = (ele: any) => {
  resetForm(ruleFormRef.value)
  dialogFormVisible.value = true
  showorhideflag.value = false
  checkmsg.operateFlag = '2'
  // console.log(ele);
  if (ele.productType === 0) {
    console.log('子弹发薪')
    bulletpayrollmsg.id = ele.id
    bulletpayrollmsg.companyId = ele.companyId
    bulletpayrollmsg.status = 2
    productflag.value = ele.productType
  } else if (ele.productType === 1) {
    console.log('电子签充值审核')
    electronicvisaauditmsg.id = ele.id
    electronicvisaauditmsg.companyId = ele.companyId
    electronicvisaauditmsg.status = 2
    productflag.value = ele.productType
  } else if (ele.productType === 2) {
    console.log('日日保充值审核')
    productflag.value = ele.productType
    checkmsg.id = ele.id
    checkmsg.companyId = ele.companyId
  } else {
    console.log('长期保充值审核')
    productflag.value = ele.productType
    checkmsg.id = ele.id
    checkmsg.companyId = ele.companyId
  }
}
const checkmsg = reactive({
  id: '',
  companyId: '',
  // 判断通过驳回状态
  operateFlag: '0',
})
const bulletpayrollmsg = reactive({
  id: 0,
  companyId: 0,
  status: -1,
})
const electronicvisaauditmsg = reactive({
  id: 0,
  companyId: 0,
  status: -1,
})
// 子弹发薪审核
const getbulletpayroll = () => {
  getbulletpayrollapi({ ...bulletpayrollmsg, ...ruleForm }).then((res) => {
    console.log(res)
    dialogFormVisible.value = false
    getclientrecharge()
  })
}
// 电子签充值审核
const getelectronicvisaaudit = () => {
  getelectronicvisaauditapi({ ...electronicvisaauditmsg, ...ruleForm }).then(
    (res) => {
      console.log(res)
      dialogFormVisible.value = false
      getclientrecharge()
    }
  )
}
// 日日保充值审核
const geteverydayinsuranceaudit = () => {
  geteverydayinsuranceauditapi({ ...checkmsg, ...ruleForm }).then((res) => {
    console.log(res)
    dialogFormVisible.value = false
    getclientrecharge()
  })
}
// 长期保充值审核
const getlongtimeinsuranceaudit = () => {
  getlongtimeinsuranceauditapi({ ...checkmsg, ...ruleForm }).then((res) => {
    console.log(res)
    dialogFormVisible.value = false
    getclientrecharge()
  })
}
// 查看详情
const handleClick = (ele: any) => {
  // console.log("查看详情");
  router.push({ path: '/clientsdetail', query: { id: ele.companyId } })
}
const back = () => {
  window.history.back()
}
const clear = () => {
  companyName.value = ''
  productcode.value = ''
  paytypecode.value = ''
  getclientrecharge()
}
// 导出
const upfile = () => {
  getclientpayexcelapi().then((res) => {
    // console.log(res);
    ElMessage({
      message: '导出成功',
      type: 'success',
    })
    window.location.href =
      baseurl + '/common/download?delete=true&fileName=' + res
  })
}
</script>

<style lang="scss" scoped>
.content {
  max-height: 800px;
  overflow: auto;
  box-sizing: border-box;
  margin: 16px;
}
.screen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  border-bottom: 2px solid #f4f4f7;
  .deleate {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .bord {
    font-weight: 700;
  }
  img {
    margin-right: 10px;
    margin-top: 5px;
  }
  .clear {
    color: rgba(148, 151, 177, 1);
    font-size: 14px;
  }
}
.screen_condition {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  .select_item {
    display: flex;
  }
  div {
    margin-right: 50px;
  }
}
.table-list {
  min-height: 580px;
  .pagination {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: end;
  }
}
.drawer {
  .closedrawer {
    cursor: pointer;
    position: fixed;
    top: 50px;
    right: 576px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 59px;
    background-color: #0256ff;
    font-size: 14px;
    color: #ffffff;
    img {
      margin-top: 5px;
    }
  }
}
.left_btn {
  width: 32px;
  height: 22px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
